<template>
  <div class="login-wrap">
    <h3>登录</h3>
    <div class="form-item">
      <span>姓名：</span>
      <input v-model="loginName" type="text">
    </div>
    <div class="form-item">
      <span>密码：</span>
      <input v-model="password" type="password">
    </div>
    <button @click="login">登录</button>
  </div>

</template>

<script>
import {login} from '@/api/login'

export default {
  data() {
    return {
      loginName: '',
      password: ''
    }
  },
  methods: {
    async login() {
      if (this.loginName && this.password) {
        const {code, data, msg} = await login({loginName: this.loginName, password: this.password})
        if (code == 200) {
          const {access_token} = data
          sessionStorage.setItem('token', access_token)
          this.$router.push('/home')
        } else {
          alert(msg)
        }
      } else {
        alert('请输入关键信息！')
      }
    }
  }
}
</script>

<style>
.login-wrap {
  width: 500px;
  height: 500px;
  margin: 100px auto;
  box-shadow: 0px 0px 10px 2px #eee;
  text-align: center;
  padding: 20px;
}

.form-item {
  margin-bottom: 16px;
}

input {
  height: 20px;
}
</style>
